<template>
	<view class="content">
		<view class="vip_info" v-if="info">
			<view class="vip_content">
				<view>
					<image :src="info.avatarurl" mode=""> </image>
				</view>
				<view class="vip_text">
					<view class="vip_nickname">
						{{ info.nick_name }}
						<view class="vip_img" v-if="vip">
							<image src="../../static/vip.png" mode=""></image>
						</view>
					</view>

					<view class="mobile" v-if="info.mobile">手机号: {{ info.mobile }}</view>

					<view style="">累计积分:{{ score }}</view>
				</view>
			</view>
		</view>
		<view class="vip_info" v-else @click="login()" style="text-align: center; align-items: center">
			<image src="../../static/avatar.png" mode=""> </image>
			<view class="info_name">立即登录</view>
		</view>
		<u-cell-group>
			<u-cell v-if="Mobile" size="large" :clickable="true" :border="true" :title="`客服电话:${Mobile}`" isLink>
			</u-cell>
			<button class="customer" open-type="contact" @contact="contact()">
				<u-cell size="large" :clickable="true" :border="true" title="联系客服" isLink @click="showtact"></u-cell>
			</button>
			<u-cell v-if="info" size="large" :clickable="true" :border="true" title="退出登录" isLink @click="out"></u-cell>
		</u-cell-group>
		<view class="up_popup" v-if="showPhone">
			<view class="up_info" style="">
				<view class="title">授权提示</view>
				<view>您还未绑定手机号,请先绑定手机号再操作!</view>
				<button class="btnPhone" open-type="getPhoneNumber" type="primary" @getphonenumber="getphone">
					绑定手机号
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		req_login,
		req_phone,
		getMobile
	} from "../../utls/api.js";
	export default {
		data() {
			return {
				info: uni.getStorageSync("info"),
				showPhone: false,
				code: "",
				Mobile: "",
				score: 0,
				vip: uni.getStorageSync("info").is_vip ? uni.getStorageSync("info").is_vip : 0,
			};
		},
		onLoad(e) {
			console.log(uni.getStorageSync("ShopDetail"));
			if (e.share_id) {
				uni.setStorageSync("share_id", e.share_id);
				console.log(e.share_id);
			}
		},
		onShow() {
			this.getpostMobile();
			if (uni.getStorageSync("info").is_vip == 1) {
				uni.showShareMenu({
					// https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html
					withShareTicket: true,
					menus: ["shareAppMessage", "shareTimeline"], //开启转发好友和转发朋友圈按钮
				});
			} else {
				uni.hideShareMenu({
					hideShareItems: ["shareTimeline", "shareMenu"],
				});
			}
		},
		onShareAppMessage: function(e) {
			// 分享到微信
			// 更多参数配置，参考文档
			let path = getCurrentPages();
			let route = path[path.length - 1].route;
			console.log(route, this.share_id);
			return {
				title: "同城泉友",
				path: `/${route}?share_id=${uni.getStorageSync("info").share_id}`,
			};
		},

		onShareTimeline() {
			// 分享到朋友圈
			let path = getCurrentPages();
			let route = path[path.length - 1].route;
			return {
				title: "同城泉友",
				path: `/${route}?share_id=${uni.getStorageSync("info").share_id}`,
			};
		},
		methods: {
			getpostMobile() {
				//获取客服手机号
				getMobile().then((Res) => {
					console.log(Res);
					if (Res.data.code == 1) {
						this.Mobile = Res.data.data.mobile;
					}
				});
			},
			login() {
				let _this = this;
				uni.login({
					provider: "weixin", //使用微信登录
					onlyAuthorize: true,
					success: function(loginRes) {
						console.log(loginRes);
						_this.code = loginRes.code;
						uni.showModal({
							title: "登录授权",
							content: "获取用户头像、昵称、地区及性别",
							showCancel: false,
							success: (res) => {
								_this.userInfo(loginRes.code);
							},
							fail: () => {},
							complete: () => {},
						});
						// 获取用户信息
					},
				});
			},
			userInfo(code) {
				uni.getUserProfile({
					desc: "获取你的昵称、头像、地区及性别",
					success: (res) => {
						console.log(res);
						if (res) {
							let info = res.userInfo;

							let data = {
								code,
								nick_name: info.nickName,
								avatarurl: info.avatarUrl,
								gender: info.gender,
								share_id: uni.getStorageSync("share_id") ?
									uni.getStorageSync("share_id") : undefined,
							};
							console.log(data);
							req_login(data).then((loginRes) => {
								let infoData = loginRes.data.data;
								if (loginRes.data.code == 1) {
									this.score = infoData.score;
									this.vip = infoData.is_vip;
									console.log("vippp", this.vip);
									console.log("信息", infoData);
									uni.setStorageSync("info", {
										nick_name: infoData.wx_nickname,
										avatarurl: infoData.wx_avatar_image,
										token: infoData.token,
										openid: infoData.x_openid,
										session_key: infoData.session_key,
										share_id: infoData.user_id,
										is_vip: infoData.is_vip,
										score: infoData.score,
										mobile: infoData.mobile,
									});
									this.info = {
										nick_name: infoData.wx_nickname,
										avatarurl: infoData.wx_avatar_image,
										token: infoData.token,
										openid: infoData.x_openid,
										session_key: infoData.session_key,
										share_id: infoData.user_id,
										is_vip: infoData.is_vip,
										score: infoData.score,
										mobile: infoData.mobile,
									};
									if (infoData.mobile == "") {
										this.showPhone = true;
									}
								} else {
									uni.showToast({
										title: "登录失败",
									});
								}
							});
						}
					},
					fail: (error) => {
						console.log(error);
						uni.showToast({
							title: "登录失败",
						});
					},
				});
			},
			getphone(event) {
				if (event.detail.errMsg == "getPhoneNumber:ok") {
					let _this = this;
					let info = event.mp.detail;
					let adinfo = uni.getStorageSync("info");
					console.log(event.mp.detail);
					uni.login({
						success(res) {
							console.log(res);
							let data = {
								code: res.code,
								iv: info.iv,
								encryptedData: info.encryptedData,
								session_key: adinfo.session_key,
							};
							req_phone(data).then((phoneRes) => {
								console.log("绑定手机号", phoneRes);
								if (phoneRes.data.code == 1) {
									_this.showPhone = false;
									uni.showToast({
										title: "绑定手机号成功",
									});
								} else {
									uni.showToast({
										title: "绑定手机号成功",
										icon: "error",
									});
								}
							});
						},
					});
				} else {
					uni.showToast({
						title: "获取手机号失败",
						icon: "error",
					});
				}
			},
			out() {
				uni.removeStorage({
					key: "info",
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: "退出登录",
							icon: "loading",
							duration: 1000,
						});
						setTimeout(() => {
							this.info = uni.getStorageSync("info");
						}, 1000);
					},
				});
			},
			contact(event) {
				console.log(event);
			},
			showtact() {
				console.log(this.$ref);
			},
		},
	};
</script>

<style lang="scss">
	.content {
		height: 100vh;
	}

	.vip_info {
		height: 320rpx;
		background-image: url("../../static/vipbj.jpg");
		color: white;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.vip_content {
			display: flex;
			margin-left: 30rpx;
			margin-bottom: 20rpx;
			position: relative;

			.vip_text {
				margin-left: 30rpx;
				font-size: 28rpx;
				margin-top: 10rpx;

				.vip_nickname {
					font-size: 35rpx;
					margin-bottom: 5rpx;
					display: flex;

					.vip_img {
						margin-left: 10rpx;

						>image {
							width: 45rpx;
							height: 45rpx;
						}
					}
				}

				.mobile {
					margin-bottom: 5rpx;
				}
			}
		}

		image {
			border-radius: 50%;
			width: 150rpx;
			height: 150rpx;
			display: block;
		}

		.info_name {
			margin-top: 20rpx;
			font-size: 27rpx;
			color: white;
			margin-bottom: 10rpx;
		}

		.vip_class {
			display: flex;
			margin-top: 10rpx;
			font-size: 30rpx;
			color: white;
		}
	}

	.vip {
		display: flex;
		justify-content: space-around;
		padding: 30rpx 0;
		background-color: white;
		width: 100%;

		.vip_list {
			width: 30%;
			height: 220rpx;
			background-color: #fbe9d3;
			font-size: 40rpx;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #6e4a15;
			position: relative;

			.vip_top {
				background: #373e3b;
				font-size: 24rpx;
				padding: 6rpx 14rpx;
				border-radius: 10rpx 0 10rpx 0;
				position: absolute;
				left: 0;
				top: 0;
				color: #cab094;
			}

			.vip_title {
				color: #111111;
				font-weight: 600;
				font-size: 32rpx;
			}
		}
	}

	.up_popup {
		background-color: rgba(0, 0, 0, 0.1);
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.up_info {
			background-color: white;
			text-align: center;
			padding: 20rpx 30rpx;
			border-radius: 15rpx;

			.btnPhone {
				background-color: #007aff;
				margin-top: 50rpx;
			}

			.title {
				font-size: 38rpx;
			}

			view {
				margin: 20rpx 0;
			}
		}
	}

	.customer {
		width: 100%;
		padding: 0;
		background-color: rgba(0, 0, 0, 0);
		text-align: left;
		width: 100%;
		overflow: hidden;
		overflow-x: scroll;
		border: none;
		border-radius: 0rpx;
	}

	button {
		border: none;
	}

	button::after {
		border: none;
	}
</style>